<template>
  <div class="boxSong">
    <!-- 精选歌单 -->
    <div class="top">
      <!-- 背景 -->
      <div class="bgc">
        <img :src="goodSongList.coverImgUrl" alt="" />
      </div>
      <!-- 信息 -->
      <div class="goodSong">
        <img :src="goodSongList.coverImgUrl" alt="" />
        <div class="info">
          <span class="goodsTitle el-icon-star-off">精品歌单</span>
          <p class="msg1">{{ goodSongList.name }}</p>
          <p class="msg2">{{ goodSongList.copywriter }}</p>
        </div>
      </div>
    </div>
    <!-- 歌单列表选择nav -->
    <div class="typeNavBox">
      <typeNav
        :hotTagTop="hotTagTop"
        :hotType="hotType"
        @updataHotTagTop="updataHotTagTop"
      ></typeNav>
      <navBar
        @updataHotTagTop="updataHotTagTop"
        :hotTagList="hotTagList"
        :top="hotTagTop"
      ></navBar>
    </div>
    <!-- 歌单展示 -->
    <div class="songItemBox">
      <songItem
        v-for="(item, index) in musicList.playlists"
        :key="index"
        :itemData="item"
        @handleClick="handleClick"
      ></songItem>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-if="musicList.playlists"
      @current-change="handlePage"
      background
      layout="prev,pager,next"
      :total="musicList.total"
      :page-size="50"
      :current-page="currentPage"
      ref="scrollBox"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  getGoodSongList,
  getHotTag,
  getHotType,
  getMusicList
} from '@/api/discover/musicList.js'
import typeNav from './components/typeNav.vue'
import navBar from './components/navBar.vue'
import songItem from '../components/songItem.vue'
export default {
  data() {
    return {
      goodSongList: [], //精品歌单数据
      hotTagTop: {}, // 热门推荐列表第一个
      hotTagList: [], // 热门推荐列表
      hotType: [], // 热门分类
      currentPage: 1, //页数
      musicList: {}, // 歌单列表
      pageTotal: 0, // 总条数
      box: this.$refs['scrollBox']
    }
  },
  components: {
    typeNav,
    navBar,
    songItem
  },
  methods: {
    async getGoodSongList() {
      const res = await getGoodSongList()
      this.goodSongList = res.data.playlists[0]
      // console.log(res)
    },
    // 获取热门歌单列表
    async getHotTag() {
      const res = await getHotTag()
      // console.log(res.data.tags)
      this.hotTagTop = res.data.tags[0]
      this.hotTagList = res.data.tags
    },
    //获取热门歌单分类
    async getHotType() {
      const res = await getHotType()
      this.hotType = res.data.sub
      // console.log(res.data.sub)
    },
    // 修改选择的分类
    async updataHotTagTop(item) {
      // console.log(item)
      this.hotTagTop = item
      this.currentPage = 1
      this.getMusicList()
    },
    // 获取歌单列表
    async getMusicList() {
      const res = await getMusicList({
        cat: this.hotTagTop.name,
        offset: 50 * (this.currentPage - 1)
      })
      this.musicList = res.data
      // console.log(res.data)
    },
    // 切换分页
    async handlePage(page) {
      this.currentPage = page
      // await location.reload()
      this.getMusicList()
      // const box = this.$refs['scrollBox']
      // console.dir(window.$el.offsetTop)
      this.$emit('clickScroll')
    },
    // 跳转歌单详情
    handleClick(id) {
      this.$router.push({ path: '/index/musicDateil', query: { id } })
      // console.log(id)
    }
  },
  created() {
    this.getGoodSongList()
    this.getHotTag()
    this.getHotType()
    this.getMusicList()
  }
}
</script>
<style lang="scss" scoped>
//精品歌单

.top {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.bgc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(20px) brightness(0.7);
  img {
    width: 100%;
  }
}
.goodSong {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
  img {
    width: 150px;
    border-radius: 10px;
    margin-right: 20px;
  }
}
.info {
  display: flex;
  flex-direction: column;
}
.goodsTitle {
  width: 32%;
  //   text-align: center;
  padding: 7px 10px 7px 10px;
  border: 1px solid #d59e54;
  border-radius: 30px;
  color: #d59e54;
  &:before {
    margin-right: 7px;
  }
}

.msg1 {
  color: #fff;
  font-size: 16px;
  margin-left: -8px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.msg2 {
  color: #999;
  font-size: 14px;
  margin-left: 10px;
}
// 歌单分类
.typeNavBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
// 歌单列表
.songItemBox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  height: 100%;
  .songItem {
    flex: 18%;
    // min-width: 217px;
    max-width: 217px;
    margin-right: 20px;
    cursor: pointer;
    margin-bottom: 15px;
    &:nth-child(5n) {
      margin-right: 0;
    }
  }
}
// 分页
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
</style>
